<template>
  <div class="headerTitle">申请人摘要</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">姓名</div>
      <div class="itemValue">
        <div>{{ orderDetails.custName }}</div>
        <div class="itemIcon" @click="goPreview">预览</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">身份证</div>
      <div class="itemValue">
        <div>{{ orderDetails.cardNo }}</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">联系电话</div>
      <div class="itemValue">
        <div>{{ orderDetails.custPhone }}</div>
        <img src="./img/phone.png" alt="" class="iconImg" />
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">申请时间</div>
      <div class="itemValue">
        <div>{{ orderDetails.createTime }}</div>
      </div>
    </div>
  </div>

  <div class="headerTitle">授信摘要</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">客群类型</div>
      <div class="itemValue">
        {{
          orderDetails.custGroupType === "0"
            ? "非一类企业白名单"
            : orderDetails.custGroupType === "1"
            ? "一类企业白名单"
            : ""
        }}
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">授信金额(元)</div>
      <div class="itemValue">{{ orderDetails.preCreditQuota }}</div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">年利率(%)</div>
      <div class="itemValue">{{ orderDetails.preYearRate }}</div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">授信期限(月)</div>
      <div class="itemValue">{{ orderDetails.preAuthTime }}</div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">单笔贷款期限(月)</div>
      <div class="itemValue">{{ orderDetails.singleUseTime }}</div>
    </div>
  </div>

  <div class="headerTitle">进度明细</div>
  <div class="progressArea">
    <!-- item -->
    <div class="progressItem">
      <div class="progressIcon">
        <img
          src="./img/selectblue.png"
          alt=""
          class="iconImg"
          v-if="orderDetails.orderExecRcdEntityList[0]"
        />
        <img src="./img/uncheckedgary.png" alt="" class="iconImg" v-else />
      </div>
      <div class="progressInfo">
        <div class="infoTitle">客户申请</div>
        <div class="progressTips" v-if="orderDetails.orderExecRcdEntityList[0]">
          操作人：<span>{{
            orderDetails.orderExecRcdEntityList[0].createBy
          }}</span>
          操作时间：<span>{{
            orderDetails.orderExecRcdEntityList[0].createTime
          }}</span>
        </div>
      </div>
    </div>
    <div class="progressItem">
      <div class="progressIcon">
        <img
          src="./img/selectblue.png"
          alt=""
          class="iconImg"
          v-if="orderDetails.orderExecRcdEntityList[1]"
        />
        <img src="./img/uncheckedgary.png" alt="" class="iconImg" v-else />
      </div>
      <div class="progressInfo">
        <div class="infoTitle">系统风控</div>
        <div class="progressTips" v-if="orderDetails.orderExecRcdEntityList[1]">
          操作人：<span>{{
            orderDetails.orderExecRcdEntityList[1].createBy
          }}</span>
          操作时间：<span>{{
            orderDetails.orderExecRcdEntityList[1].createTime
          }}</span>
        </div>
      </div>
    </div>
    <div class="progressItem">
      <div class="progressIcon">
        <img
          src="./img/selectblue.png"
          alt=""
          class="iconImg"
          v-if="orderDetails.orderExecRcdEntityList[2]"
        />
        <img src="./img/uncheckedgary.png" alt="" class="iconImg" v-else />
      </div>
      <div class="progressInfo">
        <div class="infoTitle">受理调查</div>
        <div class="progressTips" v-if="orderDetails.orderExecRcdEntityList[2]">
          操作人：<span>{{
            orderDetails.orderExecRcdEntityList[2].createBy
          }}</span>
          操作时间：<span>{{
            orderDetails.orderExecRcdEntityList[2].createTime
          }}</span>
        </div>
      </div>
    </div>
    <div class="progressItem">
      <div class="progressIcon">
        <img
          src="./img/selectblue.png"
          alt=""
          class="iconImg"
          v-if="orderDetails.orderExecRcdEntityList[3]"
        />
        <img src="./img/uncheckedgary.png" alt="" class="iconImg" v-else />
      </div>
      <div class="progressInfo">
        <div class="infoTitle">合同签订</div>
        <div class="progressTips" v-if="orderDetails.orderExecRcdEntityList[3]">
          操作人：<span>{{
            orderDetails.orderExecRcdEntityList[3].createBy
          }}</span>
          操作时间：<span>{{
            orderDetails.orderExecRcdEntityList[3].createTime
          }}</span>
        </div>
      </div>
    </div>
    <div class="progressItem">
      <div class="progressIcon">
        <img
          src="./img/selectbule_01.png"
          alt=""
          class="iconImg"
          v-if="orderDetails.orderExecRcdEntityList[4]"
        />
        <img src="./img/uncheckedgary_01.png" alt="" class="iconImg" v-else />
      </div>
      <div class="progressInfo">
        <div class="infoTitle">申请完成</div>
        <div class="progressTips" v-if="orderDetails.orderExecRcdEntityList[4]">
          操作人：<span>{{
            orderDetails.orderExecRcdEntityList[4].createBy
          }}</span>
          操作时间：<span>{{
            orderDetails.orderExecRcdEntityList[4].createTime
          }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="userState">
    <div class="contractState" @click="contractState">
      <img src="./img/hetongguanli_icon.png" alt="" class="stateIcon" />
      <div class="stateText">合同状态</div>
    </div>
    <div class="contractBtn">
      <div class="btn" @click="end">终止</div>
      <div class="btn" @click="goInvestigate">受理调查</div>
      <div class="btn" @click="goLocalSign">现场签约</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
const store = useAppStore();

const orderDetails = reactive({ orderExecRcdEntityList: [] });
let OrderBizMainEntity = null;
onLoad((options) => {
  OrderBizMainEntity = JSON.parse(options.value);
  store.setOrderId(OrderBizMainEntity.id);
  wx.setStorageSync("orderId", OrderBizMainEntity.id);
  http.creditSceneInspectDetail({ ...OrderBizMainEntity }).then((res) => {
    let { data } = res;
    let { custMainEntity, orderExecRcdEntityList, orderBizCreditEntity } = data;
    // 申请人摘要
    orderDetails.custName = custMainEntity.custName;
    orderDetails.cardNo = custMainEntity.cardNo;
    orderDetails.custPhone = custMainEntity.custPhone;
    orderDetails.createTime = custMainEntity.createTime;

    // 授信摘要
    orderDetails.custGroupType = orderBizCreditEntity.custGroupType; //客群类型
    orderDetails.preCreditQuota = orderBizCreditEntity.preCreditQuota; //授信额度
    orderDetails.preAuthTime = orderBizCreditEntity.preAuthTime; //预授信期限
    orderDetails.preYearRate = orderBizCreditEntity.preYearRate; //预授信利率
    orderDetails.singleUseTime = orderBizCreditEntity.singleUseTime; //单次用款期限
    orderDetails.finalQuota = orderBizCreditEntity.finalQuota; //最终额度
    orderDetails.finalYearRate = orderBizCreditEntity.finalYearRate; //最终利率
    orderDetails.repayMode = orderBizCreditEntity.repayMode; //还款方式
    orderDetails.authTime = orderBizCreditEntity.authTime; //授信期限
    orderDetails.orderType = orderBizCreditEntity.orderType; //订单类型 1：有 2：没有
    // 存授信id
    wx.setStorageSync("creditId", orderBizCreditEntity.id);
    store.setCreditId(orderBizCreditEntity.id);
    // 进度明细
    orderDetails.orderExecRcdEntityList.push(...orderExecRcdEntityList); //进度明细
  });
});
// 终止
const end = () => {
  wx.switchTab("../../pages/index/index");
};
// 受理调查
const goInvestigate = () => {
  if (orderDetails.orderType === "1") {
    let {
      custName,
      cardNo,
      custPhone,
      preCreditQuota,
      preYearRate,
      finalQuota,
      finalYearRate,
      authTime, //授信期限
      singleUseTime, //单次用款期限
      repayMode, //还款方式
    } = orderDetails;
    let params = {
      isGov: true,
      orderNo: OrderBizMainEntity.orderNo,
      orderId: OrderBizMainEntity.id,
      custName,
      cardNo,
      custPhone,
      preCreditQuota,
      preYearRate,
      finalQuota,
      finalYearRate,
      authTime,
      singleUseTime,
      repayMode,
    };
    wx.navigateTo({
      url: "../investigate/investigate?value=" + JSON.stringify(params),
    });
  } else {
    let {
      custName,
      cardNo,
      custPhone,
      preCreditQuota,
      preYearRate,
      finalQuota,
      finalYearRate,
      authTime, //授信期限
      singleUseTime, //单次用款期限
      repayMode, //还款方式
    } = orderDetails;
    let params = {
      isGov: false,
      orderNo: OrderBizMainEntity.orderNo,
      orderId: OrderBizMainEntity.id,
      custName,
      cardNo,
      custPhone,
      preCreditQuota,
      preYearRate,
      finalQuota,
      finalYearRate,
      authTime,
      singleUseTime,
      repayMode,
    };
    wx.navigateTo({
      url: "../investigate/investigate?value=" + JSON.stringify(params),
    });
  }
};
// 现场签约
const goLocalSign = () => {
  let { custName, cardNo, custPhone } = orderDetails;
  let params = {
    custName,
    cardNo,
    custPhone,
  };
  wx.navigateTo({
    url: "../localSign/localSign?value=" + JSON.stringify(params),
  });
};
// 合同状态
const contractState = () => {
  wx.navigateTo({
    url: "../contractState/contractState",
  });
};
// 预览
const goPreview = () => {
  wx.navigateTo({
    url: "../customData/customData",
  });
};
</script>

<style scoped lang="scss">
.userState {
  padding: 55rpx 30rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: cetner;
  .contractState {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .stateIcon {
      width: 38rpx;
      height: 41rpx;
      margin-bottom: 10rpx;
    }
    .stateText {
      font-size: 18rpx;
      color: #666;
    }
  }
  .contractBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      padding: 10rpx 31rpx;
      font-size: 24rpx;
      background: #c0c0c0;
      color: #fff;
      border-radius: 8rpx;
      margin-left: 30rpx;
    }
  }
}
.progressArea {
  background-color: #fff;
  padding: 30rpx 35rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .progressItem {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .progressIcon {
      width: 42rpx;
      height: 137rpx;
      margin-right: 10rpx;
      .iconImg {
        width: 100%;
        height: 100%;
      }
    }
    .progressInfo {
      .infoTitle {
        font-size: 24rpx;
        color: #333;
        margin-bottom: 15rpx;
      }
      .progressTips {
        font-size: 20rpx;
        color: #666;
      }
    }
  }
}
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
      .itemIcon {
        margin-left: 20rpx;
        width: 54rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        font-size: 18rpx;
        background-image: linear-gradient(to right, #619df1, #4478c1);
        border-radius: 13rpx;
        color: #fff;
      }
      .iconImg {
        width: 33rpx;
        height: 33rpx;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
